<template>
  <div class="tableBox">
    <div class="elTable" ref="elTableRef">
      <el-table ref="tableRef" tooltip-effect="light" :data="tableData" style="width: 100%" :header-cell-style="{
        background: 'rgba(48,112,249,0.05)',
        color: '#333333',
      }" :cell-style="handleCellStyle" :height="viewHeight">
        <!--        表格列-->
        <template v-for="(column, index) in columns">
          <!--          序号列和选择列-->
          <el-table-column v-if="column.type && (column.type == 'selection' || column.type == 'index')"
            :width="column.width" :type="column.type" :label="column.label"></el-table-column>
          <!--          数据列和操作-->
          <el-table-column v-else :align="column.align" :label="column.label" :width="column.width"
            show-overflow-tooltip>
            <template v-if="!column.type" slot-scope="{ row, $index }">
              <!--              操作列-->
              <slot v-if="column.slot" :index="$index" :name="column.slot" :row="row" />
              <!--              数据列-->
              <span v-else>{{ row[column.prop] }}</span>
            </template>
          </el-table-column>
        </template>
        <div slot="empty" class="empty">
          <!-- <img src="@/assets/img/table/noDataImg.png" alt="" /> -->
        </div>
      </el-table>
    </div>
    <el-pagination ref="pagination" :current-page="pagination.pageNum" :page-size="pagination.pageSize"
      :page-sizes="[10, 50, 100, 200]" :total="pagination.total" background
      layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
      @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'CommonTable',
  props: {
    // 表头
    columns: {
      type: Array,
      default: () => [],
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => [],
    },
    //   分页器信息
    pagination: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10,
        total: 0,
      }),
    },
  },
  data() {
    return {
      viewHeight: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.tableRef.doLayout();
      this.viewHeight = this.$refs.elTableRef.offsetHeight
    });
  },
  methods: {
    handleCellStyle({ row, column, rowIndex, columnIndex }) {
      if ((rowIndex + 1) % 2 == 0) {
        return {
          background: `rgba(48, 112, 249, 0.05)`,
        };
      }
    },
    /**
     * 更改表格尺寸
     * @param val
     */
    handleSizeChange(val) {
      this.$parent.setSize(val);
    },
    /**
     *更改页码
     * @param val
     */
    handleCurrentChange(val) {
      this.$parent.setPage(val);
    },
    update() {
      console.log('更新');
      this.$nextTick(() => {
        this.$refs.tableRef.doLayout();
      });
    },
  },
};
</script>

<style scoped lang="less">
.tableBox {
  display: flex;
  flex-direction: column;

  .elTable {
    box-sizing: border-box;
    flex: 1 1 auto;
    height: 0;
    padding: 0 24px;
    overflow: hidden;
  }

  .el-table {
    &::before {
      height: 0;
    }

    /deep/ .el-table__header-wrapper {
      .el-table__header {
        height: 62px;
      }

      .has-gutter {
        .gutter {
          border-bottom: 1px solid #ebeef5;
          background-color: rgba(48, 112, 249, 0.05);
        }
      }
    }

    /deep/ .el-table__body-wrapper {
      .el-table__row {
        height: 62px;

        .el-table__cell {
          color: #333333;
        }

        &:hover {
          background-color: #e1eafe !important;

          .el-table__cell {
            background-color: #e1eafe !important;
          }
        }

        &>td {
          border-bottom: none;
        }
      }

      .el-button--text {
        color: #3070f9 !important;
      }
    }
  }

  .el-pagination {
    padding: 24px;
    display: flex;
    justify-content: flex-end;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 6px 6px;
  }
}
</style>